import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Badge, Button } from 'antd'
import SearchArea from 'components/search-area'
import httpFetch from 'share/httpFetch'
import config from 'config'
import ResizeTable from 'components/resize-table'
import menuRoute from "routes/menuRoute";
import AssignmentGroup from './assignment-group';

class BudgetJournalType extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
      page: 0,
      pageSize: 10,
      columns: [
        {
          title: messages('budget-setting.key99'/*预算日记账类型代码*/),
          dataIndex: 'journalTypeCode',
          width: '20%'
        },
        {
          title: messages('budget-setting.key100'/*预算日记账类型名称*/),
          dataIndex: 'journalTypeName',
          width: '30%'
        },
        {
          title: messages('budget-setting.key101'/*预算业务类型*/),
          dataIndex: 'businessTypeName',
          width: '25%'
        },
        {
          title: messages('budget-setting.key236')/*分配人员组*/,
          dataIndex: 'id',
          width: '10%',
          render: (value, record) => <AssignmentGroup record={record}/>
        },
        {
          title: messages('common.column.status')/* 状态 */,
          dataIndex: 'isEnabled',
          width: '15%',
          render: isEnabled => <Badge status={isEnabled ? 'success' : 'error'} text={isEnabled ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}/>
        }
      ],
      pagination: {
        total: 0
      },
      searchForm: [
        {type: 'input', id: 'journalTypeCode', label: messages('budget-setting.key99'/*预算日记账类型代码*/)},
        {type: 'input', id: 'journalTypeName', label: messages('budget-setting.key100'/*预算日记账类型名称*/)}
      ],
      searchParams: {
        journalTypeCode: '',
        journalTypeName: ''
      },
      newBudgetJournalTypePage: menuRoute.getRouteItem('new-budget-journal-type', 'key'),
      budgetJournalTypeDetailPage: menuRoute.getRouteItem('budget-journal-type-detail', 'key')
    };
  }

  componentWillMount(){
    this.getList();
  }

  getList(){
    let params = this.state.searchParams;
    let url = `${config.budgetUrl}/api/budget/journal/types/query?&page=${this.state.page}&size=${this.state.pageSize}&organizationId=${this.props.organization.id}`;
    for(let paramsName in params){
      url += params[paramsName] ? `&${paramsName}=${params[paramsName]}` : '';
    }
    return httpFetch.get(url).then((response)=>{
      response.data.map((item)=>{
        item.key = item.id;
      });
      this.setState({
        data: response.data,
        loading: false,
        pagination: {
          total: Number(response.headers['x-total-count']),
          onChange: this.onChangePager,
          current: this.state.page + 1
        }
      })
    });
  };

  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({
        page: page - 1,
        loading: true
      }, ()=>{
        this.getList();
      })
  };

  search = (result) => {
    this.setState({
      page: 0,
      searchParams: {
        journalTypeCode: result.journalTypeCode ? result.journalTypeCode : '',
        journalTypeName: result.journalTypeName ? result.journalTypeName : ''
      }
    }, ()=>{
      this.getList();
    })
  };

  clear = () => {
    this.setState({
      searchParams: {
        journalTypeCode: '',
        journalTypeName: ''
      }
    })
  };

  handleNew = () => {
    this.context.router.push(this.state.newBudgetJournalTypePage.url.replace(':id', this.props.organization.id));
  };

  handleRowClick = (record) => {
    this.context.router.push(this.state.budgetJournalTypeDetailPage.url.replace(':id', this.props.organization.id).replace(':typeId', record.id));
  };

  render(){
    const { searchForm, pagination, columns, data, loading } = this.state;
    return (
      <div>
        <SearchArea
          searchForm={searchForm}
          submitHandle={this.search}
          clearHandle={this.clear}/>
        <div className="table-header">
          <div className="table-header-title">{messages('common.total', {total: pagination.total})/*共 total 条数据*/}</div>
          <div className="table-header-buttons">
            <Button type="primary" onClick={this.handleNew}>{messages('common.create')/*新建*/}</Button>
          </div>
        </div>
        <ResizeTable
          columns={columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          bordered
          onRow={record => ({onClick: () => this.handleRowClick(record)})}
          size="middle"
        />
      </div>
    )
  }

}

BudgetJournalType.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps() {
  return {}
}

export default connect(mapStateToProps)(BudgetJournalType);
